const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
  //开发模式
  mode:'development',
  entry:{
    //入口
    main:'./src/main.js'
  },
  output:{
    //出口,把文件吐到那里 ,存在根目录的文件夹
    path:path.resolve(__dirname,'dest'),
    filename:'js/chunk-[contenthash].js',  //改变文件名
    clean:true,  //清理老的打包文件
    
  },
  plugins:[  
    new HtmlWebpackPlugin({
      template:'./public/index.html',  //指明要解析的代码在哪里
      filename:'index.html',
      inject:'body'  //打包之后的js插入html那个地方 
    })
  ],
  module:{
    rules:[
      {    //让webpack读懂css
        test:/\.(css|s[cs]ss)$/,      //正则表达式  $是后缀的意思
          use: ["style-loader", "css-loader"], //从右往左
      },
      {
        test:/\.(png|jpg?g|gif|svg|webp)$/,
        type:'asset',
        parser:{
          dataUrlCondition:{
            maxSize:25*1024  //25kb
          }
        },
        generator:{
          filename:'images/[contenthash][ext][query]'
        }
      }
    ]
  }
}